<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page contentType="text/html;charset=gb2312"%>



<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <link type="text/css" rel="stylesheet" href="css/style.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/bgstretcher.css">
<link rel="stylesheet" href="css/demo.css">
    <base href="<%=basePath%>">
    
    <title>My JSP 'home.jsp' starting page

    </title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="in.css">
	-->
<SCRIPT src="js/jquery.min.js" type=text/javascript></SCRIPT>
<script type="text/javascript" src="js/jquery-1.4.3.min.js" ></script>
<script type="text/javascript" src="js/highcharts.js" ></script>
<SCRIPT src="js/jquery.min.js" type=text/javascript></SCRIPT>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/jquery-bgstretcher-3.0.1.min.js"></script>

<style type="text/css">
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.clearfix {display: inline-block;}  /* for IE/Mac */

	.cpu{width:200px;height:200px; display:block;float:left;margin-right:10px;}
	.memory{height:200px; width:830px; margin-top:10px;}
</style>
<script type="text/javascript">
        jQuery(function($){
            $("body").bgStretcher({
                images: ["images/sample-2.jpg"],
                imageWidth: 1600,
                imageHeight: 1200
            })
        });
    </script>

<SCRIPT type=text/javascript>
$(document).ready(function() {	
	$("#menu1 li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
	
	$("#menu1 li").each(function() { //For each list item...
		var linkText = $(this).find("a").html(); //Find the text inside of the a tag
		$(this).find("span").show().html(linkText); //Add the text in the span tag
	}); 
	
	$("#menu1 li").hover(function() {	//On hover...
		$(this).find("span").stop().animate({ 
			marginTop: "-40" //Find the span tag and move it up 40 pixels
		}, 250);
	} , function() { //On hover out...
		$(this).find("span").stop().animate({
			marginTop: "0" //Move the span back to its original state (0px)
		}, 250);
	});	
	
	/*	2nd example	*/
	$("#menu2 li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
	
	$("#menu2 li").each(function() { //For each list item...
		var linkText = $(this).find("a").html(); //Find the text inside of the a tag
		$(this).find("span").show().html(linkText); //Add the text in the span tag
	}); 
	
	$("#menu2 li").hover(function() {	//On hover...
		$(this).find("span").stop().animate({ 
			marginTop: "-40" //Find the span tag and move it up 40 pixels
		}, 250);
	} , function() { //On hover out...
		$(this).find("span").stop().animate({
			marginTop: "0" //Move the span back to its original state (0px)
		}, 250);
	});	
});
</SCRIPT>
  </head>
  
  <body>
  
<hr>


  <div id="menu1">
  <ul>
	<li><a href="home.jsp">首　　 页</a></li>
	<li><a href="serv.jsp">服          务</a></li>
	<li><a href="sasion.jsp">留  言   板</a></li>
	<li><a href="person.jsp">成           绩</a></li>
		
  </ul>
  <div class="cls"></div>
</div>                   <%
                         String name=request.getParameter("name");  
                         %>  
                         
					 <h3 align="center" style="font-size:15pt;color:white ;" >欢迎学号为：<%=name %>的童鞋查看自己的学习成绩</h3><hr> 
    <br>
     <table align="center" width="950" border="100" cellSpacing=1 style="font-size:15pt;color:white ;border:dashed 1pt;">
    
    <% 
  ArrayList<String[]> list=(ArrayList<String[]>)request.getAttribute("list");
						for(int i=0;i<list.size();i++){
                  String[]  strs=(String[])list.get(i);
 
   out.print("<tr>");
    out.print("<td>" + strs[0] + "</td>");
     out.print("<td>" + strs[1] + "</td>");
      out.print("<td>" + strs[2] + "</td>");
       out.print("<td>" + strs[3] + "</td>");
        out.print("<td>" + strs[4] + "</td>");
         out.print("<td>" + strs[5] + "</td>");
          out.print("<td>" + strs[6] + "</td>");
           out.print("<td>" + strs[7] + "</td>");
            out.print("</tr>");
    
 %>
    <%
    
    }
  %>
      </table>
					
<div id="content">
	
<br><br><br>
<!--DEMO start-->
<div id="chart_combo" class="chart_combo"></div>
<script type="text/javascript">
var chart;



$(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_combo' //关联页面元素div#id
        },

        title: {  //图表标题
            text: '本科生通识教育课成绩'
        },

     


        xAxis: { //x轴
            categories: ['Visual C++程序设计 ', 'Visual C++程序设计 ','大学英语（Ⅰ）', '大学英语（Ⅱ）','环境科学导论','军事理论 ',
            '军事训练 ','马克思主义基本原理 ','思想道德修养与法律基础 ','体育（Ⅰ）','体育（Ⅱ）','体育（Ⅲ）','体育（Ⅳ）','体育（Ⅴ）','职业发展与就业指导（Ⅰ）','中国近现代史纲要'],  /*X轴类别 Visual C++程序设计 4 必修 70 2 通识教育课 
06000901 Visual C++课程设计 1 必修 中等 2 通识教育课 
14120504 大学英语（Ⅰ） 5 必修 74 2.3 通识教育课 
14220504 大学英语（Ⅱ） 5 必修 62 1 通识教育课 
03028001 环境科学导论 2 必修 75 2.7 通识教育课 
21020502 军事理论 2 必修 75 2.7 通识教育课 
21020302 军事训练 2 必修 80 3 通识教育课 
15045201 马克思主义基本原理 3 必修 70 2 通识教育课 
15045601 思想道德修养与法律基础 3 必修 81 3 通识教育课 
21120102 体育（Ⅰ） 1 必修 79 3 通识教育课 
21220102 体育（Ⅱ） 1 必修 74 2.3 通识教育课 
21320102 体育（Ⅲ） .5 必修 80 3 通识教育课 
21420102 体育（Ⅳ） .5 必修 77 2.7 通识教育课 
21520102 体育（Ⅴ） .5 必修 72 2.3 通识教育课 
20100202 职业发展与就业指导（Ⅰ） 1 必修 良好 3 通识教育课 
15042401 中国近现代史纲要 2 必修 79 3 通识教育课 */
			labels:{y:18}  //x轴标签位置：距X轴下方18像素
        },
		yAxis: {  //y轴
            title: {text: '分数（分）'}, //y轴标题
			lineWidth: 2 //基线宽度
        },
        tooltip: {
            formatter: function() { //格式化鼠标滑向图表数据点时显示的提示框
                var s;
                if (this.point.name) { // 饼状图
                    s = '<b>' + this.point.name + '</b>: <br>' + this.y+ '分(' + twoDecimal(this.percentage) + '%)';
                } else {
                    s = '' + this.x + ': ' + this.y + '分';
                }
                return s;
            }
        },
        labels: { //图表标签
            items: [{
                html: '',
                style: {
                    left: '48px',
                    top: '8px'
                }
            }]
        },
		exporting: {
			enabled: false  //设置导出按钮不可用
		},
		credits: { 
			text: '返回',
			href: 'home.jsp',
		},
        series: [
        {
            type: 'column',
            name: '每科成绩',
            data: [70, 75, 74, 62.5,75,75,80,71,81,79,74,80,77,72,78,79]
        },
        {
            type: 'spline',
            name: '平均值',
            data: [80,78, 88,  70,  67,76,76,76,67,80,75,76,76,79,86,71]
        },
        {
            type: 'pie', //饼状图
            name: '',
            data: [
            {
                name: '',
                y: 47.7,
                color: '#89A54E' 
            }],
            center: [100, 80],  //饼状图坐标
            size: 0,  //饼状图直径大小
            dataLabels: {
                enabled: false  //不显示饼状图数据标签
            }
        }]
    });
});
//保留2位小数
function twoDecimal(x) {
    var f_x = parseFloat(x);
    if (isNaN(f_x)) {
        alert('错误的参数');
        return false;
    }
    var f_x = Math.round(x * 100) / 100;
    var s_x = f_x.toString();
    var pos_decimal = s_x.indexOf('.');
    if (pos_decimal < 0) {
        pos_decimal = s_x.length;
        s_x += '.';
    }
    while (s_x.length <= pos_decimal + 2) {
        s_x += '0';
    }
    return s_x;
}
</script>
	
<!--DEMO end-->
</div>			
  </body>
</html>
